<template>
  <div class="app-container" id="app-container">
<!--     头部信息-->
    <div class="header">
      <div class="head_img"><img src="../../src/assets/lh.png"></div>
      <div>
        <div class="names">李波<span>计算机维护</span></div>
        <p>工作时间：8:00-18:00</p>
      </div>
    </div>
<!--    工单统计-->
    <div class="banner">
      <div class="banners">
        <div  class="banner_top">
          <div></div>
          <div>工单统计</div>
          <div>（昆仑社区35街坊）</div>
        </div>
        <div  class="banner_num">
          <div style="color: #FF7926">
            <div class="circle circle1"><div class="circle_p"><div v-if="ticketsListTop.data" class="num">{{ ticketsListTop.data.DCL.length }}</div></div></div>
            <div class="text">待派单</div>
          </div>
          <div style="color: #FF454D;">
            <div class="circle circle2"><div class="circle_p"><div class="num">9</div></div></div>
            <div class="text">处理中</div>
          </div>
          <div style="color: #1870FF">
            <div class="circle circle3"><div class="circle_p"><div class="num">8</div></div></div>
            <div class="text">待销项</div>
          </div>
          <div style="color: #81DD47">
            <div class="circle circle4"><div class="circle_p"><div class="num">17</div></div></div>
            <div class="text">已销项</div>
          </div>
        </div>
      </div>
    </div>
<!--    内部通知-->
    <div class="content">
      <div class="contents">
        <div class="content_title">
          <div class="notice">
            <div></div>
            <div>内部通知</div>
          </div>
          <div class="more">
            <div>更多</div>
            <div><img src="../../src/assets/more.png"></div>
          </div>
        </div>
        <ul v-if="ticketsList.data">
          <!-- <li style="color: #FF2C2C;">昆仑社区35街坊-2022011711177被驳回</li> -->
          <li v-for="item in ticketsList.data" :key="item.id" @click="pending(item.id)">{{ item.wNumber }}++{{ item.wTime }}</li>
        </ul>
      </div>
    </div>
<!--    新添加的 -->
  <div class="home-bottom">
    <div class="home-bottom-item" @click="gotoDevList('red')">
      <div class="home-bottom-item-swiper">
        <div class="top">
          <div class="title">红外感应</div>
          <p>即时感应</p>
          <p>实时监测</p>
        </div>
        <div class="bottom1">
          <div class="status">监测状态</div>
        </div>
      </div>
    </div>
    <div class="home-bottom-item" @click="gotoDevList('sos')">
      <div class="home-bottom-item-swiper">
        <div class="top">
          <div class="title">{{ sosDeviceInfo.dName }}</div>
          <p>紧急呼救</p>
          <p>争分夺秒</p>
        </div>
        <div class="bottom1">
          <div class="status">监测状态{{ sosDeviceInfo.isType }}</div>
        </div>
        <div class="batteryIcon">
          <span class="batteryIconBody">
            <span id="batteryIconProgress" class="batteryIconProgress"></span>
            <label class="batteryIconContent" id="batteryIconContent">{{ dianLiang }}%</label>
            <span class="batteryIconHead"></span>
          </span>
        </div>
      </div>
    </div>
    <div class="home-bottom-item" @click="gotoDevList('fire')">
      <div class="home-bottom-item-swiper">
        <div class="top">
          <div class="title">烟雾报警</div>
          <p></p>
          <p></p>
        </div>
        <div class="bottom1">
          <div class="status">监测状态</div>
        </div>
      </div>
    </div>
  </div>
<!--     底部-->
    <div class="bottom">
      <div>
        <div class="index"><img src="../../src/assets/house.png"></div>
        <div class="index_text">首页</div>
      </div>
      <div>
        <div class="plus_outer">
          <div class="plus_inner">
            <div class="plus" @click="add">
              <div class="add">+</div>
            </div>
          </div>
        </div>
      </div>
      <div @click="news">
        <div class="new"><img src="../../src/assets/news.png"></div>
        <div class="new_text">消息</div>
      </div>
    </div>
  </div>
</template>

<script>
import router from '@/router'
import { } from '@/api/index'
import { Toast } from 'vant'
import { mapActions, mapGetters, mapState } from 'vuex'
export default {
  name: 'third',
  data () {
    return {
      dianLiang:20,
      userid:'',
      pageInfo:{
        page:'1',
        size:'9' 
      }
    }
  },
  props: {},
  watch: {
  
  },
  computed: {
    ...mapState('systick',['ticketsList','ticketsListTop','sosDeviceInfo','redDeviceInfo','sosDeviceInfoAlarmItems','redDeviceInfoAlarmItems']),
  },
  mounted () {
    this.actionShebeiList()
    this.actionTicketsList(this.pageInfo)
    this.actionTickTop()
    // this.actionShebeiList(this.userid)
    this.testBegin()
  },
  created () {

  },
  methods: {
    // 跳转到待处理页面
    pending(id){
      router.push(`/pending/${id}`)
    },
    add () {
      router.push('/add')
    },
    news () {
      router.push('/new')
    },
    gotoDevList(type){
      router.push(`/devicelist/${type}`)
    },
    testBegin(){
      let bcontent = document.getElementById("batteryIconProgress");
      bcontent.style.setProperty('width', '' + 40 * this.dianLiang / 100 + 'px');
      console.log('width', '' + 40 * this.dianLiang / 100 + '')
      if (this.dianLiang <= 10) {
          bcontent.style.setProperty('background', '#ff0000');
      }
      if (this.dianLiang > 10) {
          bcontent.style.setProperty('background', '#ffd800');
      }
      if (this.dianLiang > 50) {
          bcontent.style.setProperty('background', '#00ff21');
      }
    },
    ...mapActions('systick',['actionTicketsList','actionTickTop','actionShebeiList'])
  },
  components: {}
}
</script>

<style lang='scss' scoped>
@import "./third.scss";
</style>
